<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
        }

        #title {
            display: flex;
        }

        #title div {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            margin: 10px;
            color: red;
        }

        #content>div>ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        #content>div {
            display: none;
        }

        #content>div>ul>li {
            width: 200px;
            height: 400px;
            overflow: hidden;
            justify-content: space-between;
            margin: 20px;
        }

        #content>div>ul>li>div {
            color: red;
            font-size: 20px;
        }

        #content>div>ul>li>div>span {
            font-size: 19px;
            font-weight: 500;
        }

        .number {
            width: 30px;
        }
    </style>
</head>

<body>
    <div id="title">
        <div>空调</div>
        <div>平板电视</div>
        <div>生活电器</div>
        <div>洗衣机</div>
        <div>冰箱</div>
        <div>厨房大电</div>
    </div>
    <div id="content">
        <div>
            <ul>

            </ul>
        </div>
        <div>
            <ul>

            </ul>
        </div>
        <div>
            <ul>

            </ul>
        </div>
        <div>
            <ul></ul>
        </div>
        <div>
            <ul></ul>
        </div>
        <div>
            <ul></ul>
        </div>
    </div>

    <table border="1">
        <thead>
            <tr>
                <th><label><input type="checkbox">全选</label><button onclick="fan()">反选</button></th>
                <th>商品名称</th>
                <th>图片</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var arr = {
            kongtiao: [{
                id: 0,
                price: 355,
                img: "https://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 1,
                price: 3658,
                img: "https://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 2,
                price: 1499,
                img: "https://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 3,
                price: 4899,
                img: "https://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 4,
                price: 3198,
                img: "https://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }],
            TV: [{
                id: 5,
                price: 355,
                img: "https://img12.360buyimg.com/n7/jfs/t1/210368/32/52028/78845/6758026fFcaf70efc/62257dff40d835af.jpg.avif://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 6,
                price: 3658,
                img: "https://img12.360buyimg.com/n7/jfs/t1/210368/32/52028/78845/6758026fFcaf70efc/62257dff40d835af.jpg.avif://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 7,
                price: 1499,
                img: "https://img12.360buyimg.com/n7/jfs/t1/210368/32/52028/78845/6758026fFcaf70efc/62257dff40d835af.jpg.avif://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 8,
                price: 4899,
                img: "https://img12.360buyimg.com/n7/jfs/t1/210368/32/52028/78845/6758026fFcaf70efc/62257dff40d835af.jpg.avif://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 9,
                price: 3198,
                img: "https://img12.360buyimg.com/n7/jfs/t1/210368/32/52028/78845/6758026fFcaf70efc/62257dff40d835af.jpg.avif://img11.360buyimg.com/n7/jfs/t1/278670/14/4553/183620/67d7964cF90a5bb7a/7fa1bd78660c0b14.jpg",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }],
            life: [{
                id: 10,
                price: 355,
                img: "https://img14.360buyimg.com/n7/jfs/t1/279624/38/5584/102120/67dbd912F8abfd034/5b802163bfa276b2.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 11,
                price: 3658,
                img: "https://img14.360buyimg.com/n7/jfs/t1/279624/38/5584/102120/67dbd912F8abfd034/5b802163bfa276b2.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 12,
                price: 1499,
                img: "https://img14.360buyimg.com/n7/jfs/t1/279624/38/5584/102120/67dbd912F8abfd034/5b802163bfa276b2.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 13,
                price: 4899,
                img: "https://img14.360buyimg.com/n7/jfs/t1/279624/38/5584/102120/67dbd912F8abfd034/5b802163bfa276b2.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 14,
                price: 3198,
                img: "https://img14.360buyimg.com/n7/jfs/t1/279624/38/5584/102120/67dbd912F8abfd034/5b802163bfa276b2.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }],
            xiyiji: [{
                id: 15,
                price: 355,
                img: "https://img10.360buyimg.com/n7/jfs/t1/277290/16/5164/154692/67d9468aF50fe30a3/2b25bc10de7fc76b.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 16,
                price: 3658,
                img: "https://img10.360buyimg.com/n7/jfs/t1/277290/16/5164/154692/67d9468aF50fe30a3/2b25bc10de7fc76b.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 17,
                price: 1499,
                img: "https://img10.360buyimg.com/n7/jfs/t1/277290/16/5164/154692/67d9468aF50fe30a3/2b25bc10de7fc76b.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 18,
                price: 4899,
                img: "https://img10.360buyimg.com/n7/jfs/t1/277290/16/5164/154692/67d9468aF50fe30a3/2b25bc10de7fc76b.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 19,
                price: 3198,
                img: "https://img10.360buyimg.com/n7/jfs/t1/277290/16/5164/154692/67d9468aF50fe30a3/2b25bc10de7fc76b.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }],
            bingxiang: [{
                id: 20,
                price: 355,
                img: "https://img13.360buyimg.com/n7/jfs/t1/272374/40/5502/117477/67d96cc2F3695a5fc/af0a0f097a033486.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 21,
                price: 3658,
                img: "https://img13.360buyimg.com/n7/jfs/t1/272374/40/5502/117477/67d96cc2F3695a5fc/af0a0f097a033486.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 22,
                price: 1499,
                img: "https://img13.360buyimg.com/n7/jfs/t1/272374/40/5502/117477/67d96cc2F3695a5fc/af0a0f097a033486.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 23,
                price: 4899,
                img: "https://img13.360buyimg.com/n7/jfs/t1/272374/40/5502/117477/67d96cc2F3695a5fc/af0a0f097a033486.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 24,
                price: 3198,
                img: "https://img13.360buyimg.com/n7/jfs/t1/272374/40/5502/117477/67d96cc2F3695a5fc/af0a0f097a033486.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }],
            cook: [{
                id: 25,
                price: 355,
                img: "https://img13.360buyimg.com/n7/jfs/t1/277229/21/6525/186573/67db752cF29e51eb7/5e78f629b6aa342c.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 26,
                price: 3658,
                img: "https://img13.360buyimg.com/n7/jfs/t1/277229/21/6525/186573/67db752cF29e51eb7/5e78f629b6aa342c.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 27,
                price: 1499,
                img: "https://img13.360buyimg.com/n7/jfs/t1/277229/21/6525/186573/67db752cF29e51eb7/5e78f629b6aa342c.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 28,
                price: 4899,
                img: "https://img13.360buyimg.com/n7/jfs/t1/277229/21/6525/186573/67db752cF29e51eb7/5e78f629b6aa342c.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }, {
                id: 29,
                price: 3198,
                img: "https://img13.360buyimg.com/n7/jfs/t1/277229/21/6525/186573/67db752cF29e51eb7/5e78f629b6aa342c.jpg.avif",
                show: "格力（GREE）【强劲制冷】家用空调扇加湿冷风扇遥控净化落地冷风机水冷"
            }]
        }

        //渲染
        arr.kongtiao.forEach(item => {
            $("#content>div:eq(0)>ul").append(`
            <li>
                    <img src="${item.img}">
                    <div><span>￥</span>${item.price}</div>
                    <p>${item.show}</p>
                </li>`)
        })

        arr.TV.forEach(item => {
            $("#content>div:eq(1)>ul").append(`
            <li>
                    <img src="${item.img}">
                    <div><span>￥</span>${item.price}</div>
                    <p>${item.show}</p>
                </li>`)
        })

        arr.life.forEach(item => {
            $("#content>div:eq(2)>ul").append(`
            <li>
                    <img src="${item.img}">
                    <div><span>￥</span>${item.price}</div>
                    <p>${item.show}</p>
                </li>`)
        })

        arr.xiyiji.forEach(item => {
            $("#content>div:eq(3)>ul").append(`
            <li>
                    <img src="${item.img}">
                    <div><span>￥</span>${item.price}</div>
                    <p>${item.show}</p>
                </li>`)
        })

        arr.bingxiang.forEach(item => {
            $("#content>div:eq(4)>ul").append(`
            <li>
                    <img src="${item.img}">
                    <div><span>￥</span>${item.price}</div>
                    <p>${item.show}</p>
                </li>`)
        })

        arr.cook.forEach(item => {
            $("#content>div:eq(5)>ul").append(`
            <li>
                    <img src="${item.img}">
                    <div><span>￥</span>${item.price}</div>
                    <p>${item.show}</p>
                </li>`)
        })
        var arr1 = [{
            id: 0,
            img: "https://img13.360buyimg.com/n7/jfs/t1/277229/21/6525/186573/67db752cF29e51eb7/5e78f629b6aa342c.jpg.avif",
            price: 389,
            show: "冰箱空调洗衣机，厨房用器大彩电"
        }, {
            id: 1,
            img: "https://img13.360buyimg.com/n7/jfs/t1/277229/21/6525/186573/67db752cF29e51eb7/5e78f629b6aa342c.jpg.avif",
            price: 1998,
            show: "冰箱空调洗衣机，厨房用器大彩电"
        }, {
            id: 2,
            img: "https://img13.360buyimg.com/n7/jfs/t1/277229/21/6525/186573/67db752cF29e51eb7/5e78f629b6aa342c.jpg.avif",
            price: 2025,
            show: "冰箱空调洗衣机，厨房用器大彩电"
        }]

        //tab切换栏
        $("#title>div").first().css("background-color", "red")
        $("#title>div").first().css("color", "white")
        $("#title>div").on("click", () => {
            $(event.target).css("background-color", "red")
            $(event.target).css("color", "white")
            $(event.target).siblings().css("background-color", "white")
            $(event.target).siblings().css("color", "red")
        })
        $("#content>div").first().css("display", "block")
        $("#title>div").on("click", () => {
            $("#content>div").eq($(event.target).index()).css("display", "block")
            $("#content>div").eq($(event.target).index()).siblings().css("display", "none")
        })

        //渲染购物车
        function fn() {
            $("tbody").html("")
            arr1.forEach(item => {
                $("tbody").append(`
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>${item.show}</td>
                <td><img src="${item.img}"></td>
                <td>${item.price}</td>
                <td><input type="number" class="number "></td>
                <td><button onclick="del(${item.id})">删除</button></td>
            </tr>`)
            })
        }
        fn()

        $(".number").val(1)

        //删除单个
        function del(id) {
            var index = arr1.findIndex(item => item.id == id)
            arr1.splice(index, 1)
            fn()
        }

        //全选反选
        $("th input").on("click", () => {
            $("td .check").prop("checked", $("th input").prop("checked"))
        })
        function fan() {
            $("td .check").each((index, item) => {
                $(item).prop("checked", !$(item).prop("checked"))
                
            })
        }
        // console.log($("td .check"));



    </script>
</body>

</html>